<template>
  <div class="app-container">
    <div
      class="filter-container"
      style="display: flex;align-items: center;justify-content: space-between;"
    >
      <el-dropdown
        type="danger"
        size="mini"
      >
        <span class="el-dropdown-link">
          黑名单设置<i class="el-icon-arrow-down el-icon--right" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="changeCommentStatus(true)">
            禁止评论
          </el-dropdown-item>
          <el-dropdown-item @click.native="changeAccessStatus(true)">
            禁止登陆
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <div>
        <el-input
          v-model="listQuery.title"
          size="mini"
          placeholder="用户名"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />
        <el-button
          v-waves
          size="mini"
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
        >
          搜索
        </el-button>
      </div>
    </div>

    <el-table
      ref="multipleTable"
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        label="用户"
        min-width="150px"
      >
        <template slot-scope="{row}">
          <div style="display: flex;">
            <img
              style="width: 50px;height:50px;border-radius: 100%;"
              :src="row.user.avatar"
              alt=""
            >
            <div style="display: flex;flex-direction: column;margin-left: 10px;">
              <span>{{ row.user.username }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="消费总金额"
        prop="id"
        sortable="custom"
        align="center"
        width="80"
      >
        <template slot-scope="{row}">
          <span>{{ row.total_consume }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        width="150px"
        align="center"
      >
        <template slot-scope="{row}">
          <span>{{ row.created_time }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
        class-name="status-col"
        width="100"
      >
        <template slot-scope="{row}">
          <el-tag :type="row.status===0?'danger':'success'">
            {{ row.status | statusFilter }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="300"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{row,$index}">
          <el-button
            type="primary"
            size="mini"
            @click="openDetail(row.user.id)"
          >
            详情
          </el-button>
          <el-button
            type="success"
            size="mini"
          >
            联系用户
          </el-button>
          <el-dropdown
            size="mini"
            style="margin-left: 10px;"
            type="danger"
          >
            <span class="el-dropdown-link">
              黑名单设置<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="changeCommentStatus(row.id)">
                禁止评论
              </el-dropdown-item>
              <el-dropdown-item @click.native="changeAccessStatus(row.id)">
                禁止登陆
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
    <info ref="info" />
  </div>
</template>

<script>
  import waves from '@/directive/waves' // waves directive
  import {
    fetchList,
    userNoAccess,
    userNoComment
  } from '@/api/user'

  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  import Info from './info'
  const statusOptions = {
    0: '已下架',
    1: '已上架'
  }
  export default {
    components: {
      Pagination,
      Info
    },
    directives: {
      waves
    },
    filters: {
      statusFilter(status) {
        return statusOptions[status]
      }
    },
    data() {
      return {
        statusOptions,
        tableKey: 0,
        list: null,
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 20,
          status: undefined,
          title: undefined
        },
        multipleSelection: []
      }
    },
    created() {
      this.getList()
    },
    methods: {
      changeCommentStatus(ids) {
        if (typeof ids === 'boolean' && this.multipleSelection.length === 0) {
          return this.$message({
            message: '请选择需要操作的用户',
            type: 'error',
            showClose: true,
            duration: 3000
          })
        }
        const id = typeof ids === 'boolean' ? this.multipleSelection.filter(item => item.id) : ids
        const msg = typeof ids === 'boolean' ? '选中' : '当前'
        this.$confirm(`是否要禁止${msg}用户评论`, '提示', {
          confirmButtonText: 'OK',
          cancelButtonText: 'Cancel',
          type: 'success'
        }).then(action => {
          userNoComment(id).then(res => {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.$refs.multipleTable.clearSelection()
          })
        }).catch(() => {

        })
      },
      changeAccessStatus(ids) {
        if (typeof ids === 'boolean' && this.multipleSelection.length === 0) {
          return this.$message({
            message: '请选择需要操作的用户',
            type: 'error',
            showClose: true,
            duration: 3000
          })
        }
        const id = typeof ids === 'boolean' ? this.multipleSelection.filter(item => item.id) : ids
        const msg = typeof ids === 'boolean' ? '选中' : '当前'
        this.$confirm(`是否要禁止${msg}用户查看`, '提示', {
          confirmButtonText: 'OK',
          cancelButtonText: 'Cancel',
          type: 'success'
        }).then(action => {
          userNoAccess(id).then(res => {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.$refs.multipleTable.clearSelection()
          })
        }).catch(() => {

        })
      },
      openDetail(id) {
        this.$refs.info.show(id)
      },
      getList() {
        this.listLoading = true
        console.log(this.listQuery)
        fetchList(this.listQuery).then(response => {
          this.list = response.data.items
          this.total = response.data.total
          // Just to simulate the time of the request
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      },
      handleFilter() {
        this.listQuery.page = 1
        this.listQuery.status = parseInt(this.listQuery.status)
        this.getList()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      }
    }
  }

</script>
